<template>
	<view class="pb-safe">
		<view class="px-3-1 sticky bg-white z-10" id='info-top'>
			<SearchInput :readonly="true" @click="toSearch"/>
			<scroll-view :scroll-x="true">
				<view class="flex flex-row py-3-3">
					<view class="w-12 text-center flex flex-column flex-center" v-for="(el,i) in specialColumnData" :key="i"
						:class="{'mr-6': i < specialColumnData.length - 1}">
						<image src="/static/home/dynamic@2x.png" class="w-8 h-8"></image>
						<text class='text-s mt-1-3'>互联网转型</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-show="showActivity" class='mx-3-1 mb-2'>
			<view class='flex flex-row items-center mb-2-2'>
				<text class='flex-1 font-semibold'>活动报名</text>
				<text class='color-secondary-1'>更多</text>
			</view>
			<view class='mb-2-2'>
				<image src="/static/test/222.png" class='w-full' mode="widthFix"></image>
			</view>
			<view class='mb-2-2'>
				<image src="/static/test/222.png" class='w-full' mode="widthFix"></image>
			</view>
			<view>
				<image src="/static/test/222.png" class='w-full' mode="widthFix"></image>
			</view>
		</view>
		<view class='w-14 flex flex-column sticky sticky-top-after-titlebar' id='label-bar'>
			<text class='py-3 text-center text-m color-secondary-1' v-for="(el,i) in labelData" :key="i"
				@click="selectLabel(i)"
				:class="{'color-active': activeLabelIndex === i}">
				标签{{i}}
			</text>
		</view>
		<view class="bg-1 ml-14" :style="{marginTop: articleListMarginTop}" v-show="articleListMarginTop">
			<ArticleList :data="articleData" :first-has-pt="true" :has-px='true'></ArticleList>
		</view>
	</view>
</template>

<script>
	import { ref, getCurrentInstance, onMounted } from "vue";
	import SearchInput from "@/components/SearchInput.vue";
	import ArticleList from "@/components/ArticleList.vue";
	export default {
		components:{
			SearchInput,
			ArticleList
		},
		setup(props,ctx){
			const specialColumnData = ref([
				{},{},{},{},{},{},{},{}
			]);
			const labelData = ref([
				{},{},{},{},{},{},{},
			]);
			const articleData = ref([
				{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},{
					src: "/static/test/111.png",
					title: "玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会玩转传统企业互联网转型内参会分",
					label: '互联网转型',
					type: '传统企业',
					date: '2021-10-12'
				},
			]);
			const activeLabelIndex = ref(-1);
			const showActivity = ref(true);
			function selectLabel(i){
				activeLabelIndex.value = i;
				console.log('selectLabel',i);
			}
			function toSearch(){
				uni.navigateTo({
					url:"/pages/search/search"
				})
			}
			//配合sticky 在滚动的时候固定位置
			const labelTop = ref(null);
			const articleListMarginTop = ref(null);
			onMounted(() => {
				const { ctx } = getCurrentInstance();
				const query = uni.createSelectorQuery().in(ctx);
				// let view = query.select("#info-top");
				// view.boundingClientRect(data => {
				// 	labelTop.value = (data.height + data.top) + 'px';
				// }).exec();
				let view = query.select("#label-bar");
				view.boundingClientRect(data => {
					articleListMarginTop.value = (-data.height) + 'px';
				}).exec();
			});
			return {
				specialColumnData,
				labelData,
				activeLabelIndex,
				selectLabel,
				toSearch,
				articleData,
				showActivity,
				labelTop,
				articleListMarginTop
			};
		}
	}
</script>

<style>
	page{
		height: 100%;
	}
	.sticky-top-after-titlebar{
		top: var(--window-top);
	}
</style>
